<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div id="title">
				<span class="title-text">{{ title }}</span>
			</div>
			<div class="container" ref="usage_ref"></div>
			<div class="centerInfo"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		getSum,
	} from "@/api/index";
	export default {
		name: "YearData",
		data() {
			return {
				chartInstance: null,
				allData: null,

			};
		},
		mounted() {
			this.getSumData();

		},
		methods: {
			async getSumData() {
				let areaList = [];
				let dataList = [];
				let dataList1 = [];
				let dataList2 = [];
				const {
					data: res
				} = await getSum();
				// console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					areaList.push(res.data[i].yearstr);
					dataList.push(res.data[i].shell);
					dataList1.push(res.data[i].perf);
					dataList2.push(res.data[i].oil);
				};
				// console.log(areaList);
				this.initChart();
				this.getData(areaList, dataList, dataList1, dataList2);
			},

			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
			},
			getData(areaList, dataList, dataList1, dataList2) {
				//服务器的数据请求位置

				// this.allData = ret
				this.updateChart(areaList, dataList, dataList1, dataList2);
			},
			updateChart(areaList, dataList, dataList1, dataList2) {
				var colors = [{
						type: "linear",
						x: 0,
						x2: 1,
						y: 0,
						y2: 0,
						colorStops: [{
								offset: 0,
								color: "#218bd1"
							},
							{
								offset: 0.5,
								color: "#7EC3F0"
							},
							{
								offset: 0.5,
								color: "#1985cd"
							},
							{
								offset: 1,
								color: "#1985cd"
							}
						]
					},
					{
						type: "linear",
						x: 0,
						x2: 1,
						y: 0,
						y2: 0,
						colorStops: [{
								offset: 0,
								color: "#6DD4E5"
							},
							{
								offset: 0.5,
								color: "#6DD4E5"
							},
							{
								offset: 0.5,
								color: "#0EADC9"
							},
							{
								offset: 1,
								color: "#218bd1"
							}
						]
					},
					{
						type: "linear",
						x: 0,
						x2: 1,
						y: 0,
						y2: 0,
						colorStops: [{
								offset: 0,
								color: "#acace6"
							},
							{
								offset: 0.5,
								color: "#acace6"
							},
							{
								offset: 0.5,
								color: "#6161bd"
							},
							{
								offset: 1,
								color: "#6161bd"
							}
						]
					}
				];

				var barWidth = 35;
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#283b56',
							},
						},
					},
					grid: {
						//x轴与y轴离dom边的距离
						top: "25%",
						right: "5%",
						bottom: "15%",
						left: "10%"
					},
					legend: {
						right:"4%",
						itemHeight: 12,
						itemWidth: 17,
						data: ["总段数", "总簇数", "总孔数"],
						textStyle: {
							color: "white" //坐标的字体颜色
						}
					},

					dataZoom: [{
							type: 'inside',
							// height: 10,
							start: 0,
							end: 50
						},
						{
							height: 5,
							bottom:'15%',
							start: 0,
							end: 100
						}
					],
					color: [
						"#1788a7",
						"#7de8fd",
						"#e8b601",
					],
					xAxis: [{
						type: "category",
						boundaryGap: true,
						// data: chargeList,
						data: areaList,
						axisLabel: {
							margin:13,
							//y轴文字的配置
							textStyle: {
								color: "#c6c8ce", //Y轴内容文字颜色
							}
						},
						axisLine: {
							//x轴线的颜色以及宽度
							show: true,
							lineStyle: {
								color: "#0a3169",
								width: 2,
								type: "solid"
							}
						},
						axisTick: {
							show: false
						}

					}],
					yAxis: [{
						type: "value",
						scale: true,
						name: "数量",
						min: 0,
						nameTextStyle: {
							//y轴上方单位的颜色
							color: "#00c3f4"
						},
						boundaryGap: [0.2, 0.2],
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#00c3f4'
							}
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "#00c3f4" //Y轴内容文字颜色
							}
						},
						axisLine: {
							//x轴线的颜色以及宽度
							show: true,
							lineStyle: {
								color: "#0a3169",
								width: 2,
								type: "solid"
							}
						},

					}],
					series: [{
						name: "总段数",
						type: "bar",
						xAxisIndex: 0,
						yAxisIndex: 0,
						// data: dataList,
						data: dataList,
						barWidth: 15,
						itemStyle: {
							normal: {
								barBorderRadius: [15, 15, 0, 0], // （顺时针左上，右上，右下，左下）

							}
						}
					}, {
						name: "总簇数",
						type: "bar",
						xAxisIndex: 0,
						yAxisIndex: 0,
						// data: dataList,
						data: dataList1,
						barWidth: 15,
						itemStyle: {
							normal: {
								barBorderRadius: [15, 15, 0, 0], // （顺时针左上，右上，右下，左下）

							}
						}
					}, {
						name: "总孔数",
						type: "bar",
						xAxisIndex: 0,
						yAxisIndex: 0,
						// data: dataList,
						data: dataList2,
						barWidth: 15,
						itemStyle: {
							normal: {
								barBorderRadius: [15, 15, 0, 0], // （顺时针左上，右上，右下，左下）

							}
						}
					}, ]
				};

				this.chartInstance.setOption(option);
			}
		},
		props: {
			title: String
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.container {
		width: 100%; // 3rem;
		height: 90%; //1.48rem;

	}

	.tabel_Background {
		margin-top: 2%;
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 35%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/bg_4@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 32%; //3.02rem;
		height: 11%;
		// min-width: 2.96rem;
		text-align: center;

		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;

		color: #21beeb;
		font-weight: bold;
	}
</style>
